<template>
    <PanerGrid @onSubmit="handleSubmit" @onReset="handleReset">
      <template v-slot:search>
        <div class="d-group-items d-layout-grid d-layout-grid-4">
          <div class="d-grid-item">
            <div class="d-form-group d-form-group-flex">
              <div class="d-form-label d-text-right">
                <label class="label-text">名称</label>
              </div>
              <div class="d-form-el">
                <input v-model="search.name" @keyup.enter="handleSubmit" class="d-form-input" type="search" />
              </div>
            </div>
          </div>
          <div class="d-grid-item">
            <div class="d-form-group d-form-group-flex">
              <div class="d-form-label d-text-right">
                <label class="label-text">导航地址</label>
              </div>
              <div class="d-form-el">
                <input v-model="search.href" @keyup.enter="handleSubmit" class="d-form-input" type="search" />
              </div>
            </div>
          </div>
          <div class="d-grid-item">
            <FormCalendar
              v-model="search.createTime"
              label="创建时间"
              labelWidth="80px"
              class="d-form-group-flex"
            ></FormCalendar>
          </div>
          <div class="d-grid-item">
            <FormCalendar
              v-model="search.updateTime"
              label="修改时间"
              labelWidth="80px"
              class="d-form-group-flex"
            ></FormCalendar>
          </div>
          <div v-if="false" class="d-grid-item">
            <div class="d-form-group d-form-group-flex">
              <div class="d-form-label d-text-right">
                <label class="label-text">创建人</label>
              </div>
              <div class="d-form-el">
                <input class="d-form-input" />
              </div>
            </div>
          </div>
          <div v-if="false" class="d-grid-item">
            <div class="d-form-group d-form-group-flex">
              <div class="d-form-label d-text-right">
                <label class="label-text">修改人</label>
              </div>
              <div class="d-form-el">
                <input class="d-form-input" />
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:header>
        <div class="d-paner-caption">
          <span class="d-caption-text">导航列表</span>
          <div class="d-bar-tools d-bar-tools-condensed">
            <span class="d-tools-item"><a @click="handleAddItem" class="d-btn d-btn-plain-sign">添加</a></span>
            <span @click="handleDelChecked" class="d-tools-item"><button class="d-btn d-btn-plain-sign" type="button">删除</button></span>
          </div>
        </div>
        <div class="d-bar-tools d-bar-tools-right d-bar-tools-condensed">
          <a @click="handleClearCache" class="d-tools-item">
            <span class="d-btn d-btn-plain-sign">清除缓存</span>
          </a>
          <a @click="handleSetting" class="d-tools-item">
            <span class="d-btn d-btn-plain-sign d-btn-square-sm d-btn-flex"><SettingIcon /></span>
          </a>
          <a @click="handleReload" class="d-tools-item">
            <span class="d-btn d-btn-plain-sign d-btn-square-sm d-btn-flex"><RefreshIcon /></span>
          </a>
        </div>
      </template>
      <template v-slot:body>
        <Grid v-model="list" ref="gridList" :request="gridRequest" :isPagerAble="false" :treeProps="{idKey: 'id', idKey: 'pid', childrenKey: 'children'}">
          <GridColumn :width="32" type="tree" />
          <GridColumn :width="48" type="checkbox" />
          <GridColumn :width="50" type="index" label="序号" />
          <GridColumn field="title" label="名称" width="320">
            <template v-slot:body="scope">
              <a :href="getMicroPath('#/nave/item/' + scope.id)" :title="scope.name" class="d-text-theme d-text-linker">{{ scope.name }}</a>
            </template>
          </GridColumn>
          <GridColumn field="type" label="导航地址" width="auto">
            <template v-slot:body="scope">
              <span :title="getEnvHref(scope)">{{ getEnvHref(scope) || '--' }}</span>
            </template>
          </GridColumn>
          <GridColumn field="updateTime" label="修改时间" :width="160" format="datetime|yyyy-MM-dd HH:mm:ss" />
          <GridColumn field="createTime" label="创建时间" :width="160" format="datetime|yyyy-MM-dd HH:mm:ss" />
          <GridColumn field="action" label="操作" width="190" className="d-vm d-vm-actions">
            <template v-slot:body="scope">
              <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
                <a :href="getMicroPath('#/nave/item/' + scope.id)" title="导航列表" class="d-tools-item d-text-theme"><BlocksIcon size="sm" /></a>
                <a v-if="scope.children && scope.children.length && (pageId && pageId !== scope.id)" :href="getMicroPath('#/page/list/' + scope.id)" title="子级列表" class="d-tools-item d-text-theme"><TreeIcon size="sm" /></a>
                <a v-if="getEnvHref(scope)" :href="getEnvHref(scope)" target="_blank" title="打开页面" class="d-tools-item d-text-theme"><WindowsIcon size="sm" /></a>
                <a @click="handleAddChild(scope)" class="d-tools-item d-text-theme"><PlusRoundIcon size="sm" /></a>
                <a @click="handleEdit(scope)" class="d-tools-item d-text-theme"><EditIcon size="sm" /></a>
                <a @click="handleDelItem(scope)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
                <span class="d-dropdown d-drop-hover d-drop-right d-tools-item d-text-theme">
                  <MenuIcon title="更多" />
                  <div class="d-list-menu d-list-cascade d-list-cascade-right">
                    <ul class="d-list-menu-group">
                      <li v-if="scope.children && scope.children.length" @click="handleRemoveAll(scope)" class="d-list-menu-item">
                        <a class="d-list-item-row">
                          <DeleteIcon size="sm" /><span class="d-list-item-text">删除树</span>
                        </a>
                      </li>
                      <li class="d-list-menu-split"></li>
                      <li @mouseover="handleGetNotes(scope)" class="d-list-menu-caption">关联文档</li>
                      <li v-for="item in (scope.noteList || [])" :key="item.id" class="d-list-menu-item item-note">
                        <a :href="getMicroPath('#/note/item/' + item.id)" target="_blank" class="d-list-item-row d-text-linker">
                          <i class="d-list-item-icon"></i>
                          <span class="d-list-item-text d-text-linker">{{ item.title }}</span>
                          <i class="d-arrow-icon d-arrow-right"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </span>
              </div>
            </template>
          </GridColumn>
        </Grid>
        <Edit @onSubmitSuccess="handleEditSuccess" ref="editView" />
        <Setting @onSubmitSuccess="handleSettingSuccess" ref="settingView" />
      </template>
    </PanerGrid>
  </keep-alive>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages'
import { storeMemory } from '@daelui/dogjs/dist/components.js'
import { Grid, GridColumn, Dialoger, FormCalendar } from '@daelui/vdog/dist/components'
import {
  BlocksIcon,
  WindowsIcon,
  MenuIcon,
  EditIcon,
  DeleteIcon,
  RefreshIcon,
  PlusIcon,
  PlusRoundIcon,
  SettingIcon,
  TreeIcon
} from '@daelui/vdog/dist/icons'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import Edit from './edit.vue'
import pageSer, { api } from '../../service/action/nave.action.js'
import { treer } from '@daelui/dogjs/dist/components.js'
import Setting from './setting-envirment.vue'
import naveBus from './business/nave'

export default {
  components: {
    PanerGrid,
    Grid,
    GridColumn,
    Dialoger,
    Edit,
    RefreshIcon,
    BlocksIcon,
    WindowsIcon,
    MenuIcon,
    EditIcon,
    DeleteIcon,
    PlusIcon,
    PlusRoundIcon,
    SettingIcon,
    TreeIcon,
    FormCalendar,
    Setting
  },

  computed: {

  },

  data () {
    return {
      // 页岩id
      pageId: '',
      // 搜索条件
      search: {
        name: '',
        href: '',
        type: '',
        createTime: '',
        updateTime: ''
      },
      // 参数存储key
      paramsKey: 'page',
      list: [],
      // 表格请求配置
      gridRequest: {
        url: api.queryListPage.url, // 请求地址
        method: api.queryListPage.method, // 请求方式
        params: {}, // 请求参数
        onBeforeLoad: (request) => {
          if (this.pageId) {
            request.url = api.queryTreeAll.url
            request.data.id = this.pageId
          } else {
            request.url = api.queryListPage.url
            delete request.data.id
          }
        },
        onAfterLoad: (list) => {
          list = Array.isArray(list) ? list : []
          list.forEach(item => {
            item.noteList = []
          })
          let treeList = list
          if (!this.pageId) {
            treeList = treer.arrayToTree({ data: list })
          }
          return treeList
        }
      },
      // 编辑信息
      editInfo: {},
      // 环境列表
      envirmentList: [],
      // 当前环境
      envirment: ''
    }
  },

  methods: {
    /**
     * @function 查询事件处理
    */
    handleSubmit () {
      this.$refs.gridList.reload(this.search)
      // 存储条件
      storeMemory.setItem(this.paramsKey, this.search)
    },

    /**
     * @function 重置事件
    */
    handleReset () {
      this.search = {
        name: '',
        href: '',
        type: '',
        createTime: '',
        updateTime: ''
      }
      this.gridRequest.params = this.search
    },

    /**
     * @function 删除选定的数据
    */
    handleDelChecked () {
      let items = this.$refs.gridList.getChecked()
      this.removeItems(items)
    },

    /**
     * @function 删除单条数据
    */
    handleDelItem (item) {
      this.removeItems([item])
    },

    /**
     * @function 删除多条数据
    */
    removeItems (items) {
      items = Array.isArray(items) ? items : []
      if (items.length < 1) {
        Dialoger.warn(locale.list.selectOne)
        return false
      }
      Dialoger.confirm(locale.message.confirmDelete).then(b => {
        if (!b) {
          return false
        }
        items = items.map(item => item.id)
        pageSer.removeItem(items).then(result => {
          this.$refs.gridList.reload()
        })
      })
    },

    /**
     * @function 删除树
    */
    handleRemoveAll (item) {
      let items = []
      treer.forEach({data: item.children, callback: node => {
        items.push(node)
      }})
      items.unshift(item)
      this.removeItems(items)
    },

    /**
     * @function 显示与隐藏编辑视图
    */
    showEditView () {
      this.$refs.editView.show(this.editInfo)
    },

    /**
     * @function 添加节点
    */
    handleAddItem (item) {
      this.editInfo = {
        item: item.id ? treer.getParentNode({ node: item, treeNodes: this.list}) : null,
        parent: true
      }
      this.showEditView()
    },

    /**
     * @function 添加子节点
    */
    handleAddChild (item) {
      this.editInfo = {
        item: item,
        parent: true
      }
      this.showEditView()
    },

    /**
     * @function 编辑节点
    */
    handleEdit (item) {
      this.editInfo = {
        item: item,
        edit: true
      }
      this.showEditView()
    },

    /**
     * @function 编辑成功
    */
    handleEditSuccess () {
      this.handleReload()
    },

    /**
     * @function 设置
    */
    handleSetting () {
      this.showSettingView()
    },

    /**
     * @function 显示与隐藏设置视图
    */
    showSettingView () {
      this.$refs.settingView.show()
    },

    /**
     * @function 设置成功
    */
    handleSettingSuccess (data) {
      this.envirment = data.code
      this.handleReload()
    },

    /**
     * @function 重新加载
    */
    handleReload () {
      this.$refs.gridList.reload(this.search)
    },

    /**
     * @function 获取节点地址
    */
    getEnvHref (node) {
      return naveBus.getEnvHref(node, this.envirmentList, this.envirment)
    },

    handleGetNotes (node) {
      naveBus.queryNotes(node).then(list => {
        node.noteList = list
      })
    },

    /**
     * @function 清除缓存
    */
    handleClearCache () {
      localStorage.clear()
      sessionStorage.clear()
      Dialoger.alert('操作成功')
    }
  },

  beforeMount () {
    // 存储的条件
    let params = storeMemory.getItem(this.paramsKey)
    if (params) {
      this.search = Object.assign(this.search, params)
      this.gridRequest.params = this.search
    }
    let data = this.$route.params
    // 新建
    if (data.id) {
      this.pageId = data.id
    }
  },

  mounted () {
    // 查询环境列表
    naveBus.queryListByGroup().then(res => {
      this.envirment = res.data.envirment
      this.envirmentList = res.data.envirmentList
    }).finally(() => {
      // 查询导航层级数据
      naveBus.queryTreeData()
    })
  }
}
</script>

<style lang="less" scoped>
.d-form-label {
  width: 80px;
}
.item-note {
  .d-list-item-text {
    overflow: hidden;
    max-width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

<style lang="less">
.d-table-tbody {
  .d-vm-actions {
    .d-table-cell {
      overflow: visible;
    }
  }
  .d-vm {
    .d-table-cell {
      overflow: visible;
    }
  }
}
</style>
